<template>
    <div>
        <el-row>
            <el-col :span="10">
                <div class="grid-content bg-purple">
                    <div id="pie-chart" style="width: 100%; height: 400px;"></div>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="grid-content bg-purple-light" style="text-align: center;">
                    <div id="bar-chart" style="width: 100%; height: 400px;"></div>
                </div>
            </el-col>
        </el-row>
        <div id="line-chart" style="width: 100%; height: 440px;"></div>
    </div>
</template>

  
<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {

    data() {
        return {
            orderList: [],
            roomstatusList: [],
            roomtypeList: []
        }
    },
    mounted() {

        if (!localStorage.getItem('users')) {
            this.$router.push("/");
            this.$message({
                message: '用户未登录！非法操作！',
                type: 'error'
            });
        }

        //折线
        axios.get('http://localhost:8888/views/order')
            .then(response => {
                this.orderList = response.data;
                this.createLineChart();
            })
            .catch(error => {
                console.error(error);
            });

        //饼图
        axios.get('http://localhost:8888/views/roomtype')
            .then(response => {
                this.roomtypeList = response.data;
                const pieData = this.roomtypeList.map(item => ({
                    value: item.total_price,
                    name: item.roomtype
                }));
                this.createPieChart(pieData);
            })
            .catch(error => {
                console.error(error);
            });

        //柱状图
        axios.get('http://localhost:8888/views/roomstatus')
            .then(response => {
                this.roomstatusList = response.data;
                this.createBarChart();
            })
            .catch(error => {
                console.error(error);
            });

    },
    methods: {
        createPieChart(pieData) {
            const pieChartDom = document.getElementById('pie-chart');
            const pieChart = echarts.init(pieChartDom);

            const pieOption = {
                title: {
                    text: '2023年各类房型销售额',
                    left: 'left'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '本年度销售额',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: pieData
                    }
                ]
            };
            pieOption && pieChart.setOption(pieOption);

        }
        ,
        createBarChart() {
            const barChartDom = document.getElementById('bar-chart');
            const barChart = echarts.init(barChartDom);

            const barOption = {
                title: {
                    text: '房间实时状态统计',
                    left: 'left'
                },
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        /* ['product', '2015', '2016', '2017'],
                        ['Matcha Latte', 43.3, 85.8, 93.7],
                        ['Milk Tea', 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 72.4, 53.9, 39.1] */

                        ['房间类型', '空闲中', '入住中', '清洁中'],
                        ...this.roomstatusList.map(item =>
                            [
                                item.roomtype,
                                item.vacant,
                                item.occupied,
                                item.cleaned,
                            ])
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [
                    { type: 'bar', itemStyle: { color: '#91CC75' } },
                    { type: 'bar', itemStyle: { color: '#EE6666' } },
                    { type: 'bar', itemStyle: { color: '#FAC858' } }
                ]
            };

            barOption && barChart.setOption(barOption);
        }
        ,
        createLineChart() {
            const lineChartDom = document.getElementById('line-chart');
            const lineChart = echarts.init(lineChartDom);

            const lineOption = {
                title: {
                    text: '2023年每月份销售额',
                    left: 'left'
                },
                xAxis: {
                    type: 'category',
                    data: this.orderList.map(item => item.month)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.orderList.map(item => item.totalprice),
                        type: 'line'
                    }
                ]
            };

            lineOption && lineChart.setOption(lineOption);
        }
    }
};
</script>
  